<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>房屋租赁管理系统</title>
    <link rel="stylesheet" type="text/css" href="/static/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/themes/icon.css">
    <script type="text/javascript" src="/static/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/static/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/static/common.js?version=0.1"></script>
    <style>
    </style>
</head>
<body>


<div id="list" style="width:97%;height:250px"></div>

<div id="toolbar" class="ToolbarArea">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="openAdd()">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="openEdit()">编辑</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del()">删除</a>
</div>

<div id="dlgSave" class="easyui-dialog dlg-save" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fmSave" method="post" novalidate style="margin:0;padding:20px 50px">
        <input type="hidden" id="id" name="id">
        <table cellpadding="5">
            <tr>
                <td>标题:</td>
                <td>
                    <input name="title" id="title" class="easyui-textbox" required="true" style="width:100%">
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="save()" style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgSave').dialog('close')" style="width:90px">取消</a>
</div>

<script type="text/javascript">


    $("#list").datagrid({
        url:'/order/manage/list',
        title: '订单列表',
        fit: true,
        fitColumns: false, // 设置列固定宽度，true值表示自动填满整个横向空间
        // toolbar: "#toolbar", // 工具栏id
        idField: 'id',
        // frozenColumns: [[{
        //     field: 'ck',
        //     checkbox: true
        // }]],
        columns: [[
            {field: 'id', title: '编号', width: 180, sortable: false, align: 'left'},
            {field: 'status', title: '状态', width: 180, sortable: false, align: 'left', formatter: function(val) {
                    if(val === '0') {
                        return '待支付';
                    } else if(val === '1') {
                        return '已支付';
                    } else if(val === '2') {
                        return '取消订单';
                    } else {
                        return '';
                    }
                }},
            {field: 'customerName', title: '客户姓名', width: 100, sortable: false, align: 'left'},
            {field: 'customerMobile', title: '客户电话', width: 180, sortable: false, align: 'left'},
            {field: 'customerCard', title: '客户身份证', width: 180, sortable: false, align: 'left'},
            {field: 'checkInTime', title: '入住时间', width: 100, sortable: false, align: 'left'},
            {field: 'leaseTime', title: '入住时长（月）', width: 120, sortable: false, align: 'left'},
            {field: 'price', title: '订单价格', width: 100, sortable: false, align: 'left'},
            {field: 'createUser', title: '创建人ID', width: 180, sortable: false, align: 'left'},
            {field: 'username', title: '创建人用户名', width: 100, sortable: false, align: 'left'},
            {field: 'leaseId', title: '关联租赁ID', width: 180, sortable: false, align: 'left'},
            {field: 'houseId', title: '关联房屋ID', width: 180, sortable: false, align: 'left'},
            {field: 'createTime', title: '创建时间', width: 180, sortable: false, align: 'left'}
        ]],
        onSelect: function (rowIndex, rowData) {
            console.log(rowData);
        }
    });

    function openAdd() {
        $('#dlgSave').dialog('open').dialog('center').dialog('setTitle','添加');
        $('#fmSave').form('clear');
    }

    function save() {
        $('#fmSave').form('submit',{
            url: "/order/manage/saveOrUpdate",
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result) {
                var res = $.parseJSON(result);
                console.log(res);
                if (res.success){
                    $('#dlgSave').dialog('close');
                    $('#list').datagrid('reload');
                } else {
                    top.$.messager.show({
                        title: 'Error',
                        msg: res.msg
                    });
                }
            }
        });
    }

    function openEdit() {
        var row = $('#list').datagrid('getChecked');

        if(row.length === 0 || row.length > 1) {
            top.$.messager.show({
                title: 'Error',
                msg: '请选择一条数据'
            });

            return;
        }

        console.log("编辑", row);

        if (row){
            $('#dlgSave').dialog('open').dialog('center').dialog('setTitle','编辑');
            $('#fmSave').form('load', row[0]);
            $('#fmSave').val(row[0].id);
        }
    }


    function del() {
        var row = $('#list').datagrid('getChecked');

        let ids = new Array();
        $.each(row, function(index, value) {
            ids.push(value.id);
        });

        console.log(ids);

        if (row){
            $.ajax({
                url: "/order/manage/delete",
                type: "POST",
                data: JSON.stringify(ids),
                contentType: "application/json",
                dataType: "json",
                success: function(result) {
                    console.log(result);
                    if (result.success){
                        $('#dlgSave').dialog('close');
                        $('#list').datagrid('reload');
                    } else {
                        top.$.messager.show({
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                }
            });
        }
    }
</script>
</body>
</html>